<template>
  <div class="app-container">
    <div class="secala-top">
      <div class="operate">
        <el-button
          v-hasPermi="['exceptionMgmt:escalation:escalation']"
          type="primary"
          size="small"
          @click="handleReport"
          >上报</el-button
        >
      </div>

      <el-form
        :model="queryParams"
        ref="queryForm"
        :inline="true"
        label-width="68px"
      >
        <el-form-item>
          <el-checkbox
            v-model="queryParams.relatedVsMe"
            label="与我相关"
            border
            size="small"
            class="related-me"
            @change='handleQuery'
          ></el-checkbox>
        </el-form-item>
        <el-form-item prop="searchValue" class='el-width-10'>
          <el-input
            v-model="queryParams.searchValue"
            placeholder="请输入关键字"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item>
          <organizationCascader
            :clearData="clearData"
            :widthData="widthData"
            :arrData="queryParams"
            :isAllList="true"
            @change="queryParamsChange"
          ></organizationCascader>
        </el-form-item>

        <el-form-item prop="handleDate" class='el-width-350'>
          <el-date-picker
            clearable
            size="small"
            v-model="handleDate"
            type="datetimerange"
            value-format="yyyy-MM-dd HH:mm:ss"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="handleChangeDate">
          </el-date-picker>
        </el-form-item>
        <el-form-item prop="status" class='el-width-80'>
          <el-select
            placeholder="请选择状态"
            clearable
            v-model="queryParams.status"
            size="small"
          >
            <el-option
              v-for="item in approvalList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="small"
            @click="handleQuery"
            >搜索</el-button
          >
          <el-button icon="el-icon-refresh" size="small" @click="resetQuery"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <el-table
      ref="Table"
      :data="list"
      tooltip-effect="dark"
      style="width: 100%"
      height="calc(100% - 50px - 50px)"
      v-loading="loading"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column label="上报异常名称" prop='orderName'>
        <template slot-scope="{ row }">
          <span class='status-look' @click.stop="handleLook(row)">{{row.orderName}}</span>
        </template>
      </el-table-column>
      <el-table-column label="上报异常分类" prop='abnormalTypeName'></el-table-column>
      <el-table-column label="上报异常等级">
        <template slot-scope="{ row }">
          <span class='status-1' v-if='row.abnormalLevelCode == "AbnormalOne"'>一级</span>
          <span class='status-2' v-if='row.abnormalLevelCode == "AbnormalTwo"'>二级</span>
          <span class='status-3' v-if='row.abnormalLevelCode == "AbnormalThree"'>三级</span>
        </template>
      </el-table-column>
      <el-table-column label="关联指标" prop='indexName'></el-table-column>
      <el-table-column label="工厂" prop='factoryDeptName'></el-table-column>
      <el-table-column label="车间" prop='workshopName'></el-table-column>
      <el-table-column label="产线" prop='lineName'></el-table-column>
      <el-table-column label="关联设备" prop='equipmentName'></el-table-column>
      <el-table-column label="上报时间" prop='reportDate' min-width="155"></el-table-column>
      <el-table-column label="上报人" prop='reportName'></el-table-column>
      <el-table-column label="审核人" prop='checkName'></el-table-column>
      <el-table-column label="责任人" prop='processedName'>
        <template slot-scope="{ row }">
          <el-tooltip
            class="box-item"
            popper-class="tooltip-popper"
            placement="top"
          >
            <div style="max-width: 260px; line-height: 18px" slot="content">{{row.processedName}}</div>
            <div class='tooltip-detail'>{{row.processedName}}</div>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="状态">
        <template slot-scope="{ row }">
          <span :class="'status-'+row.status">{{approvalMap[row.status]}}</span>
        </template>
      </el-table-column>
      <el-table-column label="关联异常">
        <template slot-scope="{ row }">
          <el-button type="text" class="status-2" @click.stop="abnormaDetail(row)">{{row.abnormalNo}}</el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" fixed="right">
        <template slot-scope="{row}">
          <el-button v-hasPermi="['exceptionMgmt:escalation:approval']" v-if='row.status == 1 && row.checkUserName === name' type="text" @click.stop="handleApproval(row)">审核</el-button>
          <el-button v-hasPermi="['exceptionMgmt:escalation:remove']" v-if='row.status == 3 && row.reportUserName === name' type="text" @click.stop="handleDelete(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      :total="pager.total"
      :page.sync="pager.pageNum"
      :limit.sync="pager.pageSize"
      @pagination="getList"
    />
    <report-distribute-dialog
      :visible.sync="detailDialog.visible"
      :row="detailDialog.row"
      :mode="detailDialog.mode"
      :title="detailDialog.title"
      @submit-success="getList">
    </report-distribute-dialog>
    <report-distribute-look
      :visible.sync="lookDialog.visible"
      :mode="lookDialog.mode"
      :title="lookDialog.title"
      :row="lookDialog.row">
    </report-distribute-look>
    <excepDetail
      :visible.sync="excepData.visible"
      :row="excepData.row"
      :mode="excepData.mode"
      @submit-success="getList"/>
  </div>
</template>
<script>
import { distributeList,abnormalDel,abnormalAddOrUpdate } from "@/api/exceptionMgmt/distribute";
import organizationCascader from "@/views/components/organizationCascader";
import reportDistributeDialog from "../components/reportDistributeDialog";
import reportDistributeLook from "../components/reportDistributeLook";
import excepDetail from "../components/excepDetail";
import {approvalList,approvalMap} from "../enum.js";
import {mapGetters } from "vuex";
export default {
  components: {organizationCascader,excepDetail,reportDistributeLook,reportDistributeDialog},
  name:"Escalation",
  data() {
    return {
      queryParams: {
        factoryDeptCode: null,
        workshopCode: null,
        erpProductionLineCode:null,
        lineId:null,
        searchValue:"",
        relatedVsMe:true,
        start:null,
        end:null,
        orderType:"1"
      },
      handleDate:null,
      single: null,
      list: [],
      approvalList,
      approvalMap,
      loading: false,
      clearData:{
        factory:true,
        workshop:true,
        line:true
      },
      detailDialog:{
        visible:false,
        row:null,
        title:null,
        mode:null
      },
      lookDialog:{
        visible:false,
        mode:"report",
        title:null,
        row:null,
      },
      excepData:{
        visible:false,
        mode:"look",
        row:null
      },
      pager: {
        total: 0,
        pageNum: 1,
        pageSize: 10,
      },
      widthData:{
        factory:"10rem",
        workshop:"10rem",
        line:"10rem"
      }
    };
  },
  created() {
    const result = this.getOwnFirstLine()
    this.queryParams.factoryDeptCode = result[0]?.factoryDeptCode;
    this.queryParams.workshopCode = result[1]?.workshopCode;
    this.queryParams.erpProductionLineCode = result[2]?.lineCode;
    this.queryParams.lineId = result[2]?.lineId;
    this.getList();
  },

  computed:{
    ...mapGetters([
      'name'
    ]),
  },

  updated() {
    // myTable是表格的ref属性值
    if (this.$refs.Table && this.$refs.Table.doLayout) {
      this.$refs.Table.doLayout();
    }
  },

  methods: {
    getList() {
      this.loading = true;
      this.single = null;
      const { pageNum, pageSize } = this.pager;
      const param = {
        query:{...this.queryParams},
        pageNum,
        pageSize,
      };
      distributeList(param)
        .then((res) => {
          this.list = res?.rows || {};
          this.pager.total = res?.total || 0;
          this.loading = false;
        })
        .catch(() => {
          this.list = [];
          this.pager.total = 0;
          this.loading = false;
        });
    },

    abnormaDetail(row){
      this.excepData.row = row;
      this.excepData.visible = true;
    },

    handleChangeDate(item){
      if (item) {
        this.queryParams.start = item[0];
        this.queryParams.end = item[1];
      } else {
        this.queryParams.start = "";
        this.queryParams.end = "";
      }
    },

    //上报
    handleReport(row){
      this.detailDialog.row = row?.id ? row : null;
      this.detailDialog.title = "异常上报";
      this.detailDialog.mode = "report";
      this.detailDialog.visible = true;
    },

    //审核
    handleApproval(row){
      this.detailDialog.row = row?.id ? row : null;
      this.detailDialog.title = "上报异常审核";
      this.detailDialog.mode = "approval";
      this.detailDialog.visible = true;
    },

    //查看异常详情
    handleLook(row){
      this.lookDialog.row = row?.id ? row : null;
      this.lookDialog.title = "异常上报详情";
      this.lookDialog.visible = true;
    },

    //确定异常上报
    // handleSubmit(parmas) {
    //   this.saveloading = true
    //   parmas.orderType = "1";
    //   abnormalAddOrUpdate(parmas).then(res => {
    //     if (res.code == 200) {
    //       this.msgSuccess("操作成功")
    //       this.getList()
    //     } else {
    //       this.msgError(res.msg || "操作失败")
    //     }
    //     this.saveloading = false
    //   }).catch(() => {
    //     this.msgError("操作失败")
    //     this.saveloading = false
    //   })
    // },

    /** 删除按钮操作 */
    handleDelete(row) {
      let ids = ''
      if (row) {
        ids = row.id
      } else {
        ids = this.$refs.Table.selection
          .map(ele => ele.id).join(',')
      }
      this.$confirm('是否确认删除所选异常数据?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
      }).then(() => {
        const parmas = {ids:ids.split()}
        return abnormalDel(parmas)
      }).then(() => {
         this.getList()
      })
    },

    queryParamsChange({ factoryDeptCode, workshopCode,lineCode,lineId }) {
      this.queryParams = {
        factoryDeptCode,
        workshopCode,
        erpProductionLineCode:lineCode,
        lineId,
        searchValue:this.queryParams.searchValue,
        relatedVsMe:this.queryParams.relatedVsMe,
        start:this.queryParams.start,
        end:this.queryParams.end,
        orderType:"1"
      }
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.pager.pageNum = 1;
      this.getList();
    },

    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams = {
        factoryDeptCode: null,
        workshopCode: null,
        erpProductionLineCode:null,
        lineId:null,
        searchValue:"",
        relatedVsMe:true,
        start:null,
        end:null,
        orderType:"1"
      };
      this.handleDate = null;
      this.handleQuery();
    }
  },
};
</script>
<style lang="scss" scoped>
.secala-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  .operate{
    flex:1
  }
  .el-form{
    text-align: right;
    ::v-deep .el-form-item__content{
      line-height: 0;
    }
    .el-range-editor{
      width:100%;
    }
  }
}
.pagination-container {
  margin: 0;
}

.status-1{
  color: #D9001B;
  font-weight: 600;
}

.status-2{
  color: #F59A23;
  font-weight: 600;
}
.status-3{
  color: #88c446;
  font-weight: 600;
}
.status-4{
  color: #666666;
  font-weight: 600;
}
.status-look{
  color:#027DB4
}
// ::v-deep .el-table__fixed-right{
//   height:100% !important;
// }
</style>
